<!-- src/views/About.vue -->
<template>
  <div>
    <h1>配置SQL server 数据到 MySQL 数据的同步规则</h1>
    <el-row :gutter="24">
      <el-col :span="7"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 520px">
            <template #header>
              <div class="card-header">
                <span>数据库与字段</span>
              </div>
            </template>
            <el-tree
              :data="treeData"
              :props="defaultProps"
              show-checkbox
              node-key="id"
              highlight-current
              @node-click="handleNodeClick"
            />
          </el-card>
        </div>
      </el-col>
      <el-col :span="7"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>配置数据同步规则</span>
              </div>
            </template>
            <div>
              <el-input
                type="textarea"
                :rows="30"
                v-model="jsonString"
                placeholder="请输入JSON数据"
                @input="handleJsonInput"
              ></el-input>
              <el-button type="primary" @click="saveJson">保存</el-button>
              <p>解析后的 JSON 数据：</p>
              <pre>{{ parsedJson }}</pre>
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="7"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>配置数据抽取规则</span>
              </div>
            </template>
          </el-card>
        </div></el-col
      >
      <el-col :span="3"
        ><div class="grid-content ep-bg-purple">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>启动/停止数据抽取引擎</span>
              </div>
            </template>
            <el-button type="primary" @click="startEng">启动</el-button>
            <el-button type="primary" @click="stopEng">停止</el-button>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>
  
<script setup>
import axios from "../api/axios"; // 引入 Axios 封装
import { ref, onMounted } from "vue";

const treeData = ref([]);
const jsonString = ref("");
let parsedJson = ref({});
const originalJson = ref({});

const defaultProps = ref({
  children: "children", // 子节点 key
  label: "label", // 显示的节点名称 key
});

async function get_sync_last_time_json_obj() {
  try {
    await axios.post("/get_json_file").then((response) => {
      originalJson.value = response.data.data;
      jsonString.value = JSON.stringify(originalJson.value);
      parsedJson.value = JSON.parse(jsonString.value);
    });
  } catch {
    (error) => {
      console.log(error);
    };
  }
}

async function get_tree_data() {
  try {
    await axios.post("/get_db_schema").then((response) => {
      treeData.value = response.data.data;
    });
  } catch {
    (error) => {
      console.log(error);
    };
  }
}

function handleNodeClick(data) {
  console.log(data);
}
function handleJsonInput(value) {
  try {
    parsedJson.value = JSON.parse(value);
  } catch (e) {
    parsedJson.value = "无效的 JSON 格式";
  }
}
function saveJson() {
  // 保存并更新 JSON 数据
  try {
    axios
      .post("/save_json_file", { json_str: JSON.stringify(parsedJson.value) })
      .then((response) => {
        treeData.value = response.data.data;
      });
  } catch (e) {
    alert("文件保存失败：" + e);
  }
}

function startEng() {
  try {
    axios
      .post("/task/start")
      .then((response) => {
        alert(response.data.message)
      });
  } catch (e) {
    alert("启动数据抽取引擎失败：" + e);
  }
}

function stopEng() {
  try {
    axios
      .post("/task/stop")
      .then((response) => {
        alert(response.data.message)
      });
  } catch (e) {
    alert("停止数据抽取引擎失败：" + e);
  }
}

onMounted(() => {
  get_tree_data();
  get_sync_last_time_json_obj();
  // 初始化 JSON 字符串
});
</script>
  